<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2022-01-24 11:12:33
 * @LastEditors: GGB
 * @LastEditTime: 2022-04-19 16:09:47
-->
<template>
  <div ref="wrapRef" :style="customStyle"></div>
</template>
<script lang="ts" setup>
  import { ref, nextTick, unref, onMounted } from 'vue';

  import { useScript } from '/@/hooks/web/useScript';

  const A_MAP_URL =
    'https://webapi.amap.com/maps?v=2.0&key=4f3dc82a5850fffe517a72d60ca2ff7d&plugin=AMap.DistrictSearch';
  const A_LOCA_URL = 'https://webapi.amap.com/loca?v=2.0.0&key=4f3dc82a5850fffe517a72d60ca2ff7d';

  const customStyle = {
    width: '100%',
    height: '100%',
  };

  const wrapRef = ref<HTMLDivElement | null>(null);
  const { toPromise } = useScript({ src: A_MAP_URL });
  const { toPromise: toLatPromise } = useScript({ src: A_LOCA_URL });
  const center = ref<number[]>([106.669825, 26.558026]);

  const initMap = async () => {
    await toPromise();
    await toLatPromise();
    await nextTick();
    const wrapEl = unref(wrapRef);
    if (!wrapEl) return;
    const AMap = (window as any).AMap;
    const Loca = (window as any).Loca;

    /**
     * 地图阉割
     */
    var opts = {
      subdistrict: 0,
      extensions: 'all',
      level: 'city',
    };
    //利用行政区查询获取边界构建mask路径
    //也可以直接通过经纬度构建mask路径
    var district = new AMap.DistrictSearch(opts);
    district.search('贵阳市', function (_, result) {
      var bounds = result.districtList[0].boundaries;
      var mask: any = [];
      for (var i = 0; i < bounds.length; i += 1) {
        mask.push([bounds[i]]);
      }
      const map = new AMap.Map(wrapEl, {
        viewMode: '3D',
        zoom: 16,
        mask: mask,
        pitch: 45,
        showLabel: false,
        showBuilding: false,
        center: center.value,
        terrain: true, // 开启地形图
        mapStyle: 'amap://styles/42f58d090711ef3adf5f65771d3bf38d',
        // mapStyle:'amap://styles/grey'
      });

      const loca = new Loca.Container({
        map,
      });

      // 文字图层
      var centerLayer = new Loca.ScatterLayer({
        zIndex: 10,
        opacity: 0.8,
        visible: true,
        zooms: [2, 22],
      });

      let centerPoint = new Loca.GeoJSONSource({
        data: {
          type: 'FeatureCollection',
          features: [
            {
              type: 'Feature',
              geometry: {
                type: 'Point',
                coordinates: [106.669825, 26.558026],
              },
            },
          ],
        },
      });
      centerLayer.setSource(centerPoint);
      // 弧线

      centerLayer.setStyle({
        size: [30, 30],
        unit: 'miter',
        animate: true,
        duration: 1000,
        texture: 'https://a.amap.com/Loca/static/static/center-point.png',
      });
      loca.add(centerLayer);

      let points = [
        [106.660803, 26.55791],
        [106.672665, 26.557344],
        [106.671753, 26.558798],
        [106.67082, 26.556303],
        [106.670026, 26.558611],
        [106.670444, 26.556096],
        [106.672559, 26.555467],
      ];
      for (let i in points) {
        var scatterLayer1 = new Loca.ScatterLayer({
          zIndex: 10,
          opacity: 1,
          visible: true,
          zooms: [2, 22],
        });
        var point1 = new Loca.GeoJSONSource({
          data: {
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                geometry: {
                  type: 'Point',
                  coordinates: points[i],
                },
              },
            ],
          },
        });
        scatterLayer1.setSource(point1);
        scatterLayer1.setStyle({
          size: [100, 100],
          unit: 'miter',
          animate: true,
          duration: 1000,
          texture: 'https://a.amap.com/Loca/static/static/green.png',
        });

        loca.add(scatterLayer1);

        /**
         * 创建飞线
         */
        let pulseLink = new Loca.PulseLinkLayer({
          // loca,
          zIndex: 10,
          opacity: 1,
          visible: true,
          zooms: [2, 22],
          depth: true,
        });
        var line = new Loca.GeoJSONSource({
          data: {
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                properties: {
                  type: 0,
                  ratio: 0.0369,
                  lineWidthRatio: 1,
                },
                geometry: {
                  type: 'LineString',
                  coordinates: [center.value, points[i]],
                },
              },
            ],
          },
        });

        pulseLink.setSource(line);
        pulseLink.setStyle({
          unit: 'meter',
          dash: [2, 0, 2, 0],
          lineWidth: function () {
            return [5, 2];
          },
          height: function (_, feat) {
            return feat.distance / 2;
          },
          // altitude: 1000,
          smoothSteps: 100,
          speed: function (_, feat) {
            return feat.distance / 3;
          },
          flowLength: 50,
          lineColors: function (_, __) {
            return ['rgba(255,228,105,0)', 'rgba(255,164,105,0)', 'rgba(1, 34, 249,0)'];
          },
          maxHeightScale: 0.5, // 弧顶位置比例
          headColor: 'rgba(255, 255, 0, 1)',
          trailColor: 'rgba(255, 255,0,0)',
        });
        loca.add(pulseLink);
      }
      loca.animate.start();
      //添加描边
      for (var i = 0; i < bounds.length; i += 1) {
        new AMap.Polyline({
          path: bounds[i],
          strokeColor: '#99ffff',
          strokeWeight: 4,
          map: map,
        });
      }
    });
  };

  onMounted(() => {
    initMap();
  });
</script>
